<template>
  <br />
  <z-space>
    <z-button type="primary" @click="openNotification('topLeft')">
      <radius-upleft-outlined />
      topLeft
    </z-button>
    <z-button type="primary" @click="openNotification('topRight')">
      <radius-upright-outlined />
      topRight
    </z-button>
  </z-space>
  <z-divider />
  <z-space>
    <z-button type="primary" @click="openNotification('bottomLeft')">
      <radius-bottomleft-outlined />
      bottomLeft
    </z-button>
    <z-button type="primary" @click="openNotification('bottomRight')">
      <radius-bottomright-outlined />
      bottomRight
    </z-button>
  </z-space>
</template>

<script>
import { notification } from '../../../../lib/index.js'
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const openNotification = placement => {
      notification.open({
        message: `Notification ${placement}`,
        description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        placement
      })
    }
    return {
      openNotification
    }
  }
})
</script>
